<div class="filters__section">
  <div class="fcell">
    <% dropdown_id = "top-#{SecureRandom.uuid}" %>
    <a href="#" class="button button__xs button__transparent-secondary" data-controller="dropdown" data-target="dropdown-filters-<%= dropdown_id %>">
      <%= t("filter_label", scope: "decidim.admin.filters") %>
      <%= icon "arrow-down-s-line", class: "dropdown-filter-icon" %>
      <%= icon "arrow-down-s-line", class: "dropdown-filter-icon" %>
    </a>
    <%= dropdown_submenu(submenu_options_tree(i18n_ctx), dropdown_id) %>
  </div>
  <div class="fcell search">
    <%= search_form_for(query, url: url_for) do |form| %>
      <%= applied_filters_hidden_field_tags %>
      <div class="input-group">
        <%= form.search_field(
              search_field_predicate,
              class: "input-group-field",
              label: false,
              placeholder: t(search_field_predicate,
                             collection: collection_name,
                             scope: "decidim.admin.filters.search_placeholder")
            ) %>
        <div class="input-group-button">
          <button type="submit" class="text-secondary" aria-label="<%= t("decidim.search.term_input_placeholder") %>">
            <%= icon "search-line", class: "fill-secondary w-4 h-4" %>
          </button>
        </div>
      </div>
    <% end %>
  </div>
</div>
<div class="mb-4 flex items-center gap-2" data-applied-filters-tags>
  <%= applied_filters_tags(i18n_ctx) %>
</div>
